<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商" prop="shipmentCode" label-width="110px" style="margin-right:15px">
              <el-input v-model="form.shipmentName" placeholder="请输入商品分类" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商品分类" style="margin-right:15px" prop="typeName" label-width="110px">
              <el-input v-model="form.typeName" placeholder="请输入商品分类" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商品编码" style="margin-right:15px" prop="goodCode" label-width="110px">
              <el-input v-model="form.goodCode" placeholder="请输入商品编码" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商品条码" style="margin-right:15px" prop="barCode" label-width="110px">
              <el-input v-model="form.barCode" placeholder="请输入商品条码" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商品名称" style="margin-right:15px" prop="name" label-width="110px">
              <el-input v-model="form.name" placeholder="请输入商品名称" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="基本单位" style="margin-right:15px" prop="unitCode" label-width="110px">
              <el-select v-model="form.unitCode" placeholder="请输入基本单位" style="width:100%" :disabled="true">
                <el-option
                  v-for="item in unitList"
                  :key="item.code"
                  :label="item.unitName"
                  :value="item.code"
                />
              </el-select>

            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="规格" style="margin-right:15px" prop="spec" label-width="110px">
              <el-input v-model="form.spec" placeholder="请输入规格" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="批次规则" style="margin-right:15px" prop="lotNumber" label-width="110px">
              <el-select v-model="form.lotNumber" placeholder="请输入批次规则" style="width:100%" :disabled="true">
                <el-option
                  v-for="item in batchRuleList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商品类型" style="margin-right:15px" prop="type" label-width="110px">
              <el-select v-model="form.type" placeholder="请选择商品类型 " style="width:100%" :disabled="true">
                <el-option
                  v-for="item in typeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="保质期（天）" style="margin-right:15px" prop="quality" label-width="110px">
              <el-input v-model="form.quality" placeholder="请输入保质期（天）" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="临期预警（天）" style="margin-right:15px" prop="earlyWarning" label-width="110px">
              <el-input v-model="form.earlyWarning" placeholder="请输入临期预警（天）" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="收货预警（天）" style="margin-right:15px" prop="receivingWarning" label-width="110px">
              <el-input v-model="form.receivingWarning" placeholder="请输入收货预警（天）" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="发货预警（天）" style="margin-right:15px" prop="sendWarning" label-width="110px">
              <el-input v-model="form.sendWarning" placeholder="请输入发货预警（天）" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="混放策略" style="margin-right:15px" label-width="120px" prop="storageStrategy">
              <el-select v-model="form.storageStrategy" placeholder="请输入混放策略 " style="width:100%" :disabled="true"
                         clearable>
                <el-option
                  v-for="item in storageStrategyTypeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="品牌" style="margin-right:15px" prop="sendWarning" label-width="110px">
              <el-select v-model="form.brandCode" placeholder="请输入品牌" style="width:100%" :disabled="true">
                <el-option
                  v-for="item in brandList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>

            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div style="margin-top: 20px; margin-left: 70px; margin-bottom:50px">
            <el-checkbox v-model="form.sale" label="可销售" disabled></el-checkbox>
            <el-checkbox v-model="form.purchase" label="可采购" disabled></el-checkbox>
          </div>
        </el-col>
      </el-row>
      <vxe-table
        border
        resizable
        show-overflow
        ref="xTable"
        :align="allAlign"
        :data="tableData"
        show-footer
        >
        <template v-slot:empty>
          <p></p>
        </template>
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="unitNum" title="单位编码" width="120"
                          ></vxe-table-column>
        <vxe-table-column field="unitName" title="单位名称" width="120"
                          ></vxe-table-column>
        <vxe-table-column field="quantity" title="件装量" width="120"
                          ></vxe-table-column>
        <vxe-table-column field="length" title="长（m）" width="120" ></vxe-table-column>
        <vxe-table-column field="width" title="宽（m）"  width="120"></vxe-table-column>
        <vxe-table-column field="height" title="高（m）" width="120" ></vxe-table-column>
        <vxe-table-column field="weight" title="重量（kg）" width="120" ></vxe-table-column>
        <vxe-table-column field="volume" title="体积（m³）" width="120" ></vxe-table-column>
      </vxe-table>

    </el-form>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import {goodsDetail} from '@/api/basicInfo'
  import { findUnitByShipmentCode, findBatchRuleByShipmentCode, findBrandByShipmentCode} from '@/api/basicInfo'
  import shipmentSelect from '@/views/components/shipmentSelect.vue'

  Vue.use(VXETable)
  export default {
    name: 'Child',
    components: {
      shipmentSelect
    },
    props: {
      operationTypeCode: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        unitCodeDisabled: false,
        unitNameDisabled: false,
        quantityDisabled: false,
        allAlign: 'center',
        unitList: [],                  //基础单位数据
        brandList: [],                  //品牌数据
        batchRuleList: [],                  //批次规则数据
        storageStrategyTypeData: [   //混放策略列表
          {code: "0", name: "商品混放"},
          {code: "1", name: "批次混放"},
          {code: "2", name: "混放"},
          {code: "3", name: "不混放"},
        ],
      typeData:[   //商品分类列表
        { code: "0", name: "原料" },
        { code: "1",name: "成品" },
        { code: "2",name: "半成品" },
      ],

        tableData: [
          {
            quantity: 1,
            isShow: 1
          }
        ],
        form: {
          auxiliaryUnitCode: '',       //辅助单位 ,
          barCode: '',                 //商品条码 ,
          brandCode: '',               //品牌code ,
          code: '',                    //数据标识 ,
          convertedQuantity: '',       //换算数量 ,
          createdBy: '',               //创建人 ,
          earlyWarning: '',            //临期预警 ,
          gmtModified: '',             //修改时间 ,
          gmt_created: '',             //创建时间 ,
          goodCode: '',                //商品编码 ,
          isDeleted: '',               //删除标识 ,
          isLotNumber: '',             //是否启用批次号 ,
          lotNumber: '',               //批号 ,
          purchase:'' ,
          sale: '',
          storageStrategy: '',
          unitConversions: [],
          storageStrategyText: '',
          maxStock: '',                //最高库存量预警 ,
          miniStock: '',               //最低库存量预警 ,
          mnemonic: '',                //助记符 ,
          modifiedBy: '',              //修改人 ,
          multiple: '',                //补货倍数 ,
          name: '',                    //商品名称 ,
          partyGroupCode: '',          //所属机构 ,
          quality: '',                 //保质期 ,
          receivingWarning: '',        //收货预警 ,
          sendWarning: '',             //发货预警 ,
          shipmentCode: '',            //所属入驻商 ,
          shipmentName:'',
          spec: '',                    //规格 ,
          stockType: '',               //库存类型 ,
          typeCode: '',                //商品类型 ,
          unitCode: '',                //单位code ,
          unitPrecision: '',           //单位精度 ,
          volume: '',                  //体积 ,
          weight: '',                  //重量
        },
        rules: {
          brandNumber: [
            {required: true, message: '请输入品牌编码', trigger: 'blur'},
          ],
          typeName: [
            {required: true, message: '请输入商品分类', trigger: 'blur'},
          ],
          goodCode: [
            {required: true, message: '请输入商品编码', trigger: 'blur'},
          ],
          barCode: [
            {required: true, message: '请输入商品条码', trigger: 'blur'},
          ],
          name: [
            {required: true, message: '请输入商品名称', trigger: 'blur'},
          ],
          unitCode: [
            {required: true, message: '请输入基本单位', trigger: 'blur'},
          ],
          unitPrecision: [
            {required: true, message: '请输入基本单位精度', trigger: 'blur'},
          ],
          lotNumber: [
            {required: true, message: '请输入批次规则', trigger: 'blur'},
          ],
          typeCode: [
            {required: true, message: '请输入商品类型', trigger: 'blur'},
          ],
          quality: [
            {required: true, message: '请输入保质期（天）', trigger: 'blur'},
          ],
          storageStrategy: [
            {required: true, message: '请输入混放策略', trigger: 'blur'},
          ],
          shipmentCode: [
            {required: true, message: '请选择所属入驻商', trigger: 'blur'},
          ],
        },
        validRules: {
          unitCode: [
            {required: true, message: '单位编码必须填写'},
          ],
          quantity: [
            {required: true, message: '件装量必须填写'},
          ],
        },

      }
    },
    created() {
      this.getInfo()
    },
    methods: {
      // 获取页面信息
      getInfo() {
        goodsDetail(this.operationTypeCode).then(response => {
          this.form = response.data
          if(this.form.purchase == 0){
            this.form.purchase = false
          }
          if(this.form.purchase == 1){
            this.form.purchase = true
          }
          if(this.form.sale == 0){
            this.form.sale = false
          }
          if(this.form.sale == 1){
            this.form.sale = true
          }
          this.tableData = response.data.units
        findUnitByShipmentCode(response.data.shipmentCode).then(response => {
          this.unitList = response.data
        })
        findBrandByShipmentCode(response.data.shipmentCode).then(response => {
          this.brandList = response.data
        })
        findBatchRuleByShipmentCode(response.data.shipmentCode).then(response => {
          this.batchRuleList = response.data
        })

        })
      }

    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin-top: 50px;
  }
</style>
